<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡功能</title>
    <style>
        /* 居中容器样式 */
        .container {
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }

        /* 选项卡容器样式 */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            display: flex;
            justify-content: center;
        }

        /* 选项卡按钮样式 */
        .tab button {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* 鼠标悬停时按钮样式 */
        .tab button:hover {
            background-color: #ddd;
        }

        /* 激活的按钮样式 */
        .tab button.active {
            background-color: #ccc;
        }

        /* 选项卡内容样式 */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>选项卡功能示例</h2>

    <!-- 选项卡按钮 -->
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'Tab1')">选项卡 1</button>
        <button class="tablinks" onclick="openTab(event, 'Tab2')">选项卡 2</button>
        <button class="tablinks" onclick="openTab(event, 'Tab3')">选项卡 3</button>
    </div>

    <!-- 选项卡内容 -->
    <div id="Tab1" class="tabcontent">
        <img src="1.jpg" alt="Image 1">
        <h3>选项卡 1 内容</h3>
        <p>这是选项卡 1 的内容。</p>
    </div>

    <div id="Tab2" class="tabcontent">
        <img src="2.jpg" alt="Image 2">
        <h3>选项卡 2 内容</h3>
        <p>这是选项卡 2 的内容。</p>
    </div>

    <div id="Tab3" class="tabcontent">
        <img src="3.jpg" alt="Image 3">
        <h3>选项卡 3 内容</h3>
        <p>这是选项卡 3 的内容。</p>
    </div>
</div>

<script>
    // 默认打开第一个选项卡
    document.getElementById("Tab1").style.display = "block";
    document.getElementsByClassName("tablinks")[0].className += " active";

    // 打开选项卡的函数
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        // 隐藏所有选项卡内容
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // 移除所有按钮的激活状态
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // 显示当前选项卡内容并激活按钮
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

</body>
</html>